<template>
  <wd-popup
    :model-value="show"
    custom-style="padding-top: 24rpx;background:white;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    :close-on-click-modal="false"
    @update:model-value="$emit('update:show', $event)"
  >
    <view class="close-button" @click="$emit('update:show', false)">
      <wd-icon name="close" size="36rpx" color="#333333" />
    </view>
    <view class="title">
      留言
    </view>
    <view class="message-block">
      <view class="inline-label required">
        问题描述
      </view>
      <v-textarea
        v-model="formData.customer_remark"
        :custom-style="{ height: '200rpx' }"
        :maxlength="500"
        placeholder="请输入问题情况，详细的描述有助于更好地解决问题"
      />
      <v-uploader
        ref="uploaderRef"
        v-model="formData.image"
        v-model:loading="uploading"
        :pre-list="formData.image"
        upload-url="/storefront/v1/file/upload/image"
        upload-name="file"
        size="140rpx"
        :extra-data="{ type: 'ORDER_COMPLAINT_IMAGE' }"
        :max-length="6"
      />
    </view>
    <view class="submit-button-container">
      <v-button
        type="primary"
        :custom-style="{ height: '80rpx' }"
        @click="submitHandle"
      >
        发送留言
      </v-button>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
import VUploader from '@/components/v-uploader/v-uploader.vue';

const props = defineProps<{
  id: string;
  show: boolean;
}>();

const emits = defineEmits<{
  'update:show': [val: boolean];
  refresh: [];
}>();

const formData = ref<{
  /** 客户备注 */
  customer_remark: string;
  /** 图片 */
  image?: string[];
}>({
  customer_remark: '',
  image: []
});

watch(
  () => props.show,
  (val) => {
    if (val) {
      formData.value.customer_remark = '';
      formData.value.image = [];
      uploaderRef.value?.setImageList([]);
    }
  }
);

const uploaderRef = ref<InstanceType<typeof VUploader>>();
const uploading = ref(false);
const validate = async () => {
  if (uploading.value) {
    uni.showToast({ title: '图片上传中，请稍后', icon: 'none' });
    return false;
  }
  if (!formData.value.customer_remark) {
    uni.showToast({ title: '请输入问题描述', icon: 'none' });
    return false;
  }
  return true;
};

const submitHandle = async () => {
  const valid = await validate();
  if (!valid) return;
  uni.showLoading({ mask: true });
  const response = await $api.postOrderComplaintLeaveMsgId(props.id, {
    content: formData.value.customer_remark,
    image: formData.value.image ?? []
  });
  uni.hideLoading();
  switch (response.__error) {
    case undefined:
      emits('refresh');
      emits('update:show', false);
      break;
  }
};
</script>

<style lang="scss" scoped>
.back-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 60rpx;
  text-align: center;
}

.message-block {
  margin: 0 24rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;
  .inline-label {
    font-size: 30rpx;
    line-height: 40rpx;
    font-weight: bold;
    &.required::before {
      content: '*';
      color: red;
      margin-right: 4rpx;
    }
  }
}

.submit-button-container {
  margin: 24rpx;
  padding: 10rpx 0;
}
</style>
